<template>
  <div class="notification-publish">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>{{ isEdit ? '编辑通知' : '发布通知' }}</span>
        </div>
      </template>
      
      <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
        <el-form-item label="通知标题" prop="title">
          <el-input v-model="form.title" placeholder="请输入通知标题" />
        </el-form-item>
        
        <el-form-item label="通知类型" prop="type">
          <el-radio-group v-model="form.type">
            <el-radio :label="0">普通通知</el-radio>
            <el-radio :label="1">重要通知</el-radio>
          </el-radio-group>
        </el-form-item>
        
        <el-form-item label="通知内容" prop="content">
          <el-input
            v-model="form.content"
            type="textarea"
            :rows="10"
            placeholder="请输入通知内容"
          />
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="submitForm" :loading="submitting">{{ isEdit ? '保存' : '发布' }}</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getNotificationDetail, addNotification, updateNotification } from '@/api/notification'

const route = useRoute()
const router = useRouter()
const formRef = ref(null)
const submitting = ref(false)

// 是否为编辑模式
const isEdit = computed(() => !!route.query.id)

// 表单数据
const form = reactive({
  id: undefined,
  title: '',
  type: 0,
  content: '',
  status: 1  // 默认为已发布状态
})

// 表单校验规则
const rules = {
  title: [
    { required: true, message: '请输入通知标题', trigger: 'blur' },
    { max: 100, message: '标题长度不能超过100个字符', trigger: 'blur' }
  ],
  type: [
    { required: true, message: '请选择通知类型', trigger: 'change' }
  ],
  content: [
    { required: true, message: '请输入通知内容', trigger: 'blur' }
  ]
}

// 获取通知详情
const getDetail = async (id) => {
  try {
    const { data } = await getNotificationDetail(id)
    Object.assign(form, data)
  } catch (error) {
    console.error('获取通知详情失败:', error)
    ElMessage.error('获取通知详情失败')
    router.push('/notification/list')
  }
}

// 提交表单
const submitForm = async () => {
  if (!formRef.value) return
  
  await formRef.value.validate(async (valid) => {
    if (valid) {
      submitting.value = true
      try {
        // 创建一个新对象，只包含实体所需的字段
        const notificationData = {
          id: form.id,
          title: form.title,
          content: form.content,
          type: form.type,
          status: form.status
        }
        
        if (isEdit.value) {
          await updateNotification(notificationData)
          ElMessage.success('更新成功')
        } else {
          await addNotification(notificationData)
          ElMessage.success('发布成功')
        }
        router.push('/notification/list')
      } catch (error) {
        console.error('提交失败:', error)
        ElMessage.error('提交失败: ' + (error.message || '未知错误'))
      } finally {
        submitting.value = false
      }
    }
  })
}

// 取消
const cancel = () => {
  router.push('/notification/list')
}

onMounted(() => {
  if (isEdit.value) {
    getDetail(route.query.id)
  }
})
</script>

<style lang="scss" scoped>
.notification-publish {
  .card-header {
    font-weight: bold;
  }
}
</style> 